<template>
    <div>
        <h2>1.简单的数据双向绑定</h2>
        <p>原始文本信息：{{message}}</p>
        <h4>文本框</h4>
        <p>v-model:<input type="text" v-model="message"></p>
        <br/>
        <br/>
        <h2>2.修饰符</h2>
        <ul>
            <li>.lazy：取代 imput 监听 change 事件。
                <code>
                    在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：v-model.lazy="message"
                </code>
            </li>
            <li>.number：输入字符串转为数字。
                <code>
                    如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
                    v-model.number="message"
                </code>
            </li>
            <li>.trim：输入去掉首尾空格。
                <code>
                    如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： v-model.trim="message"
                </code>

            </li>
        </ul>

        <h2>3.多选按钮绑定一个值</h2>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for='isTrue'>{{isTrue}}</label>

        <h2>4.多选绑定一个数组</h2>
        <p>
            <input type="checkbox" id="a" value="张三" v-model="names">
            <label for="a">张三</label><br/>
            <input type="checkbox" id="b" value="李四" v-model="names">
            <label for="b">李四</label><br/>
            <input type="checkbox" id="c" value="王五" v-model="names">
            <label for="c">王五</label>
            <br/>
            <span>{{names}}</span>
        </p>

        <h2>5.单选按钮绑定</h2>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="one">女</label>
        <p>{{sex}}</p>
    </div>
</template>

<script>
    export default {
        name: 'vnodel',
        data() {
            return {
                message: "你好，VUE",
                isTrue: true,
                names: [],
                sex: '男'
            }
        }
    }
</script>
<style scoped>
</style>
